<template>
  <div class="app-container">
    <el-form :model="queryParams" inline>
      <el-form-item label="场馆名称">
        <el-input v-model="queryParams.stadiumName" placeholder="请输入场馆名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="evaluateList">
      <el-table-column label="用户头像">
        <template #default="{ row }">
          <el-image
            v-if="row.userIcon != null && row.userIcon != ''"
            style="width: 40px; height: 40px"
            :src="row.userIcon"
            fit="cover"
          />
        </template>
      </el-table-column>
      <el-table-column label="用户昵称" prop="nickName" />
      <el-table-column label="场馆名称" prop="stadiumName" />
      <el-table-column label="评价内容" prop="content" />
      <el-table-column label="评价时间" prop="createTime" />
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="auto"
      >
        <template #default="scope">
          <!-- <el-button type="text"
                     v-hasPermi="['sys:evaluate:btn_back']"
                     @click="handleReply(scope.row)"
          >回复</el-button>
          <el-button
            type="text"
            v-hasPermi="['sys:evaluate:btn_back_view']"
            @click="getReplyList(scope.row)"
          >回复列表</el-button> -->
          <el-button
            type="text"
            v-hasPermi="['sys:evaluate:btn_remove']"
            style="color: #383838"
            @click="delEvaluate(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <Pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
    <reply v-model:open="replyOpen" :title="replyTitle" ref="replyRef"></reply>
    <reply-list
      v-model:open="replyListOpen"
      :title="replyListTitle"
      ref="replyListRef"
    ></reply-list>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, nextTick } from 'vue'
import { getEvaluateList, delEvaluateById } from '@/api/evaluate/evaluate'
import reply from './addReply.vue'
import ReplyList from './replyList.vue'
import Pagination from '@/components/Pagination/index.vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 定义组件名称
defineOptions({
  name: 'list',
})

interface EvaluateItem {
  id?: number
  userIcon?: string
  nickName?: string
  stadiumName?: string
  content?: string
  createTime?: string
  [key: string]: any
}

interface QueryParams {
  pageNum: number
  pageSize: number
  stadiumName: string | null
}

// 遮罩层
const loading = ref(true)

// 查询参数
const queryParams = reactive<QueryParams>({
  pageNum: 1,
  pageSize: 10,
  stadiumName: null,
})

// 评价list数据
const evaluateList = ref<EvaluateItem[]>([])

// 总条数
const total = ref(0)

// 回复弹窗相关
const replyOpen = ref(false)
const replyTitle = ref('')
const replyRef = ref<InstanceType<typeof reply> | null>(null)

// 回复列表弹窗相关
const replyListOpen = ref(false)
const replyListTitle = ref('')
const replyListRef = ref<InstanceType<typeof ReplyList> | null>(null)

// 搜索
const handleSearch = () => {
  queryParams.pageNum = 1
  getList()
}

// 评价列表
const getList = () => {
  loading.value = true
  getEvaluateList(queryParams).then((response) => {
    evaluateList.value = response.rows
    total.value = response.total
    loading.value = false
  })
}

// 删除评价
const delEvaluate = (row: EvaluateItem) => {
  ElMessageBox.confirm('是否确认删除评价编号为"' + row.id + '"的数据项？', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(() => {
      return delEvaluateById(row.id!)
    })
    .then((res) => {
      if (res.code == 200) {
        ElMessage.success(res.msg)
      } else {
        ElMessage.error(res.msg)
      }
      getList()
    })
    .catch(() => {})
}

// 回复用户评论
const handleReply = (evaluate: EvaluateItem) => {
  nextTick(() => {
    replyOpen.value = true
    replyTitle.value = '用户评论回复'
    if (replyRef.value) {
      replyRef.value.setEvaluate(evaluate)
    }
  })
}

// 回复列表展示
const getReplyList = (row: EvaluateItem) => {
  nextTick(() => {
    replyListOpen.value = true
    replyListTitle.value = '回复列表'
    if (replyListRef.value) {
      replyListRef.value.getList(row.id!)
    }
  })
}

onMounted(() => {
  getList()
})
</script>

<style scoped></style>
